<template>
  <div class="oi-wrap">
    <div class="oi-title">
      <div class="oi-title-order">
        <!-- 订单号:<span>{{item.createTime}}</span> -->
        编号:<span>{{item.id}}</span>
        </div>
      <div 
        class="oi-title-copy" 
        id="copyOrdersn"
        :data-clipboard-text="item.id"
        @click="copyA()"
      >复制
      </div>
    </div>
    <div class="oi-content">
      <div class="oi-content-left">
        <img v-lazy="item.skuImage" :key="item.skuImage">
        <div class="oi-content-left-text">
          <div class="name">{{item.skuName}}</div>
          <div class="price">¥{{item.ratePrice}} <span>{{item.spreadNum}}人热推中</span></div>
          <div class="des">
            <!-- <p>佣金 <span>¥{{item.commission}}</span></p>
            <p>佣金比例 <span>{{item.commissionRate}}%</span></p> -->
            <p>月销 <span>{{item.monthSales}}</span></p>
          </div>
        </div>
      </div>
      <div class="oi-content-right">
        <div class="oi-content-right-state">样品状态：<span :class="fontColorActive(item.status)">{{item.status}} </span><span v-show="item.reason!==null">{{item.reason}}</span></div>
        <div class="oi-content-right-order">
          <div class="number">物流快递单号：<span>{{item.trackNo}}</span></div>
          <div 
            class="copy"
            id="copyExpress"
            :data-clipboard-text="item.trackNo"
            @click="copyB()"
          >复制
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  props:{
    item:{
      type:Object
    },
     index: {
      type: Number,
      default: 0
    }
  },
  data(){
    return{
      orderNum: 1542583855847,
      expressNum:31458957,
      test:'' //每次点击复制前，关闭弹窗重复往下弹出
    }
  },
  computed:{
      fontColorActive(){
        return function(status){
        return {
          'red1': status === '未通过',
        }
      }
    },
  },
  methods:{
    copyA(){  //复制订单号
      const clipboardA = new this.$clipboard("#copyOrdersn")
      this.copyAlert(clipboardA)
    },
    copyB(){  //复制物流订单号
      const clipboardB = new this.$clipboard("#copyExpress")
      this.copyAlert(clipboardB)
    },
    copyAlert(param){ //复制成功或者失败的弹窗显示
      if(this.test){
        this.test.close() //每次进来关闭一下
      }
      param.on('success', e => {
        this.test=this.$message({ type: 'success', message: '复制成功',duration:1000 })
        param.destroy() //释放内存
      })
      param.on('error', e => {
        this.test=this.$message({ type: 'warning', message: '该浏览器不支持自动复制',duration:1000 })
        param.destroy()
      })
    }
  }
}
</script>

<style scoped>
  .oi-wrap {
    width: 100%;
    height: 176px;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
  }
  .oi-title {
    display: flex;
    height: 36px;
    background: #f4f4f4;
    align-items: center;
  }
  .oi-title-order {
    font-size: 14px;
    color: #666;
    margin-left: 18px;
    padding-right: 40px;
    border-right: 1px solid #e1e1e1;
  }
  .oi-title-copy {
    color: #0096e6;
    font-size: 14px;
    margin-left: 20px;
    cursor: pointer;
    background:#ffffff;
  }
  .oi-content {
    display: flex;
    align-items: center;
  }
  .oi-content-left img {
    width: 100px;
    height: 100px;
  }
  .oi-content-left {
    display: flex;
    align-items: center;
    border-right: 1px solid #e1e1e1;
    width: 50%;
    height: 140px;
    padding-left: 18px; 
  }
  .oi-content-left-text {
    flex: 1;
    margin-left: 55px;
  }
  .oi-content-left-text .name {
    font-size: 14px;
    color: #000;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .oi-content-left-text .price {
    color: #de1e1e;
    font-size: 18px;
    margin-top: 18px;
  }
  .oi-content-left-text .price span {
    color: #666666;
    font-size: 14px;
    margin-left: 15px;
  }
  .oi-content-left-text .des {
    display: flex;
    align-items: center;
    margin-top: 18px;
  }
  .oi-content-left-text .des p {
    margin-right: 10px;
    color: #666666;
    font-size: 14px;
  }
  .oi-content-left-text .des p span {
    color: #ff6600;
  }
  .oi-content-right {
    flex: 1;
    margin-left: 52px;
  }
  .oi-content-right-state {
    color: #666666;
    font-size: 14px;
  }
  .oi-content-right-state span {
    color: #20ba39;
  }
  .oi-content-right-state .red1{
    color:#de1e1e;
  }
  .oi-content-right-state .red2{
    color:#de1e1e;
  }
  .oi-content-right-state .red3{
    color:#de1e1e;
  }
  .oi-content-right-order {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666666;
    margin-top: 27px;
  }
  .oi-content-right-order .number {
    padding-right: 40px;
    border-right: 1px solid #e1e1e1;
  }
  .oi-content-right-order .copy {
    color: #0096e6;
    font-size: 14px;
    margin-left: 20px;
    cursor: pointer;
  }
</style>
